<template>
	<view class="page-user">
		<view class="bgwhite">
			<view class="info_main">
				<view>头像</view>
				<view class="" style="width: 120upx; height: 120upx;">
					<avatar
						selWidth="400upx"
						selHeight="400upx"
						@upload="myUpload"
						:avatarSrc="'../../static/missing-face.png'"
						avatarStyle="width: 120upx; height: 120upx; "
					></avatar>
				</view>
			</view>
			<view class="info_cont">
				<view>昵称</view>
				<input class="color999" type="text" placeholder="输入中文或英文，1~8个字" />
			</view>
			<view class="info_cont">
				<view>性别</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">请选择性别</view>
			</view>
			<view class="info_cont">
				<view>生日</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">请选择生日</view>
			</view>
			<view class="info_cont">
				<view>所在地</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">请选择地址</view>
			</view>
			<view class="info_cont">
				<view>手机号</view>
				<text class="iconfont icon-fanhui1"></text>
				<input class="color999" type="text" value="13112345678" disabled="true" />
			</view>
		</view>
		<view class="confirm-btn">确定</view>
	</view>
</template>

<script></script>

<style lang="scss">
.bgwhite {
	background: #fff;
}
.page-user {
	width: 100%;
	height: 100%;

	.info_main {
		width: 100%;
		height: 151upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		padding: 0 30upx;

		view {
			font-size: 30upx;
			color: #999999;
		}

		image {
			float: right;
			width: 94upx;
			height: 94upx;
			border-radius: 50%;
		}
	}

	.info_main:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #eeeeee;
	}

	.info_cont {
		width: 100%;
		height: 101upx;
		position: relative;
		overflow: hidden;
		padding: 0 30upx;

		view {
			font-size: 30upx;
			line-height: 101upx;
			color: #999999;
			float: left;
		}

		.txt {
			display: block;
			width: auto;
			height: 101upx;
			float: right;
			text-align: right;
			margin-right: 10upx;
			font-size: 30upx;
			width: 500upx;
		}

		.uni-input,
		input {
			display: block;
			width: auto;
			height: 101upx;
			float: right;
			text-align: right;
			margin-right: 10upx;
			font-size: 30upx;
			width: 500upx;
		}

		text {
			font-size: 14upx;
			color: #bfbfbf;
			float: right;
			line-height: 101upx;
		}

		.iconfont {
			font-size: 28upx;
		}
	}

	.uni-input-placeholder {
		color: #999;
	}

	.info_cont:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #eeeeee;
	}
}

.confirm-btn {
	width: 80%;
	height: 80upx;
	background: #fdd100;

	border-radius: 60upx;
	margin: 40upx auto;

	text-align: center;
	color: #fff;
	line-height: 80upx;
	font-size: 30upx;
}
</style>
